<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/nouislider.css" />
	<link rel="stylesheet" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/search.css"/>
</head>
<body class="white">
	<div class="mui-content loading">
		<div class="mui-scroll-wrapper">
		    <div class="mui-scroll" id="vueMain">
			    <div class="mui-content-padded search-item city citylink" >
					<div class="mui-pull-right"> {{cityName}} </div>
					<div class="mui-pull-left">所在城市</div>
				</div>
				<template v-for="(item,index) in list.attr">
					<div v-if="item.value.length<5">
						<div class="search-h1">{{item.name}}</div>
						<div class="typeList sex" v-if="item.value.length==3" >
							<template v-for="val in item.value">
								<span :data-id="item.id">{{val}}</span>
							</template>
						</div>
						<div class="typeList twos" v-else-if="item.value.length==2" :data-id="item.id">
							<template v-for="val in item.value">
								<span :data-id="item.id">{{val}}</span>
							</template>
						</div>
						<div class="typeList" v-else :data-id="item.id">
							<template v-for="val in item.value">
								<span :data-id="item.id">{{val}}</span>
							</template>
						</div>
					</div>
					<div v-else>
						<div class="mui-content-padded search-item city openW" :data-id="item.id" :data-name="item.name" >
							<div class="mui-pull-right">&nbsp;</div>
							<div class="mui-pull-left">{{item.name}}</div>
						</div>
					</div>
				</template>
				<div class="search-h1">价格区间</div>
					<div class="mui-content-padded nouder" style="margin-bottom: 4px;">
						<div class="mui-clearfix">
							<span class="mui-pull-left">10</span>
							<span class="mui-pull-right ">2.5K</span>
						</div>
						<div id="noUiSlider" class="noUiSlider"></div>
					</div>
		    </div>
		</div>
		<div class="search-bug" >
			<button type="button" class="bexta-btn bexta-btn-drak mui-btn mui-btn-block bexta-btn-no_radius search-btn">开始搜索</button>
		</div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/nouislider.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	 var  apps , views;
	 mui.plusReady(function () {
	     views = bexta.getWebview();
	     bexta.ajax(api.search, function(res){
	     	initVue(res);
	     }, {data:{class_id:views.commend_id}});
	 });
	function initVue(da){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:da,
				cityName:'',
				cityid:0,
				attr:[],
				attrName:{},
				startPrice:0,  //起始价格
				endPrice:2500  //结束价格
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				initMounted();
				var self = this;
				var picker = new mui.PopPicker({layer:1, buttons:['取消','确定']});
				var cityArr = [], defaultIndex = 0;
				mui.each(this.list.citylist, function(index){
					if( this.text == '深圳' ){
						defaultIndex = index;
						self.cityName = this.text;
						self.cityid = this.value;
					}
					cityArr.push({value:this.value, text:this.text});
				});
				picker.setData(cityArr);
				picker.pickers[0].setSelectedIndex(defaultIndex,800);
				mui('#vueMain').on('tap', '.citylink', function(){
					picker.show(function(f){
						apps.cityName = f[0].text;
						apps.cityid = f[0].value;
					});
				});
				//选择
				mui('#vueMain').on('tap', '.typeList span', function(){
					var aid = this.getAttribute('data-id'),
						txt = this.innerText.trim();
					if( this.classList.contains('active') ){
						//取消这个选择
						this.classList.remove('active');
						mui.each(apps.attr, function(index,item){
							if( this == aid+'*'+txt ){
								apps.attr.splice(index,1);
							}
						});
					}else{
						//选中
						this.classList.add('active');
						apps.attr.push( aid+'*'+txt );
					}
				});
				
				mui('#vueMain').on('tap', '.openW', function(){
					var aid = this.getAttribute('data-id'),
						name = this.getAttribute('data-name');
					bexta.openWithTitle({
						id:'age',
						url:'age.html',
						extras:{
							val:getAttrVal(aid),
							aid:aid,
							def:apps.attrName[aid+'_a'] || []
						}
					},{
						title:{
							text:name
						}
					})
				});
				
			}
		});
	}
	window.addEventListener('setVal', function(evt){
		var aid = evt.detail.aid,
			vals = evt.detail.val;
		if( vals.length == 0 ) return ;
		mui.each(apps.attr, function(index){ 
			if( this.indexOf(aid) != -1 ){
				apps.attr[index] = "";
			}
		});
		mui.each(vals, function(index){
			if( !bexta.inArray(apps.attr, aid+'*'+this) ){
				apps.attr.push( aid+'*'+this );
			}
		});
		var ap =[];
		mui.each(apps.attr, function(){
			if( this && this != "" ){
				ap.push(this);
			}
		});
		apps.attr = ap;
		apps.attrName[aid+'_a'] = vals;
		//设置显示
		var opens = document.querySelectorAll('.openW');
		mui.each(opens , function(){
			var id = this.getAttribute('data-id');
			if( id == aid ){
				this.querySelector('.mui-pull-right').innerHTML = vals.length == 1 ? vals[0] : vals[0]+'...';
			}
		});
		
		
	});
	function getAttrVal(aid){
		var idx;
		mui.each(apps.list.attr, function(index){
			if( this.id == aid ){
				idx = index;
			}
		});
		return idx ? apps.list.attr[idx].value : null;
	}
	function initMounted(){
		setTimeout(function(){
	 		mui('.mui-scroll-wrapper')[0].style.height = window.innerHeight - 50 + 'px';
	   		mui('.mui-scroll-wrapper').scroll();
	 	},200)
	   	var noUiSlider_obj = document.getElementById('noUiSlider');
			noUiSlider.create(noUiSlider_obj, {
				start: [0, 2500],
				connect: true,
				setp: 10,
				range: {
					min: [10],
					max: [5000]
				} 
			});
			noUiSlider_obj.noUiSlider.on('update', function(val, index) {
				var span = D('.nouder .mui-clearfix span');
				for(var i = 0; i < val.length; i++) {
					if(val[i] > 999) {
						val[i] = (parseFloat(val[i]) / 1000).toFixed(2) + 'K';
					} else {
						val[i] = parseInt(val[i]);
					}
				}
				span.dom[index].innerText = val[index];
			});
			
			
			
			
		mui('body').on('tap', '.search-btn', function(){
			var send = {
				commend_id:views.commend_id,
				city_id:apps.cityid,
				start_price:apps.startPrice,
				end_price:apps.endPrice,
				attr_id:apps.attr.join(',')
			}; 
			mui.fire(views.opener(), 'toggleGetData',{
				da:send
			});
			mui.back();
		});
		
		
	}
	mui.init();
</script>
</body>
</html>